<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body class="gray-bg">

<style type="text/css">
	.info-box-content {
		padding: 5px 10px;
		margin-left: 90px;
	}
	.info-box-number {
		display: block;
		font-weight: bold;
		font-size: 18px;
		margin-top: 15px;
	}
	.info-box-text {
		text-transform: uppercase;
	}
	.info-box {
		display: block;
		min-height: 90px;
		background: #fff;
		width: 100%;
		box-shadow: 0 1px 1px rgba(0,0,0,0.1);
		border-radius: 2px;
		margin-bottom: 15px;
	}
	.bg-red{
		background-color: #dd4b39 !important;
	}
	.bg-aqua{
		background-color: #00c0ef !important ; 
	}
	.bg-yellow{
		background-color: #f39c12 !important ; 
	}
	.bg-primary {
		background-color: #02619a !important ; 
	}
	span.info-box-icon {
		border-top-left-radius: 2px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 2px;
		display: block;
		float: left;
		height: 90px;
		width: 90px;
		text-align: center;
		font-size: 45px;
		line-height: 90px;
		background: rgba(0,0,0,0.2);
		color: #fff;
	}
</style>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-7">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>柱状图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-primary"><i class="fab fa-google-plus-g"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">访问次数</span>
                                        <span class="info-box-number">12,821<small>次</small></span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-aqua"><i class="fas fa-paper-plane"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">访问流量</span>
                                        <span class="info-box-number">41,410M</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-red"><i class="fas fa-ambulance"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">异常次数</span>
                                        <span class="info-box-number">760次</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 接口访问</a></li>
                        <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">业务服务访问</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body">
								<table class="table table-striped">
								  <thead>
									<tr>
									  <th>服务名称</th>
									  <th>访问次数</th>
									  <th>访问流量</th>
									  <th>响应时间</th>
									</tr>
								  </thead>
								  <tbody>
									<tr th:each="i:${#numbers.sequence(1,9)}">
									  <td>集成管理平台</td>
									  <td>17221次</td>
									  <td>512M</td>
									  <td>31毫秒</td>
									</tr>
								  </tbody>
								</table>
							</div>
                        </div>
                        <div id="tab-2" class="tab-pane">
                            <div class="panel-body">
								<table class="table table-striped">
								  <thead>
									<tr>
									  <th>业务服务</th>
									  <th>访问次数</th>
									  <th>访问流量</th>
									  <th>响应时间</th>
									</tr>
								  </thead>
								  <tbody>
									<tr th:each="i:${#numbers.sequence(1,3)}">
									  <td>中银业务系统</td>
									  <td>17221次</td>
									  <td>512M</td>
									  <td>31毫秒</td>
									</tr>
								  </tbody>
								</table>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <!-- 
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>基本表单 <small>简单登录表单示例</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="form_basic.html#">选项1</a>
                                </li>
                                <li><a href="form_basic.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12 select-table table-striped">
                                <table id="bootstrap-table-list" data-mobile-responsive="true"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
             -->
        </div>
		<div class="col-sm-12 select-table table-striped">
			<form id="ordinary-form" style="margin-bottom:15px">
				<div class="select-list">
					<ul>
						<li>
							用户名称：<input type="text" name="userName"/>
						</li>
						<li>
							<a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;导出</a>
						</li>
					</ul>
				</div>
			</form>
			<table  id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
    </div>

<footer th:replace="dashboard/footer :: footer"></footer>

    <script th:src="@{/asserts/ajax/libs/report/echarts/echarts-all.js}"></script>

    <script type="text/javascript">
        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
	        var baroption = {
	            title : {
	                text: '访问报表'
	            },
	            tooltip : {
	                trigger: 'axis'
	            },
	            legend: {
	                data:['访问量','流量']
	            },
	            grid:{
	                x:30,
	                x2:40,
	                y2:24
	            },
	            calculable : true,
	            xAxis : [
	                {
	                    type : 'category',
	                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
	                }
	            ],
	            yAxis : [
	                {
	                    type : 'value'
	                }
	            ],
	            series : [
	                {
	                    name:'访问量',
	                    type:'bar',
	                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
	                    markPoint : {
	                        data : [
	                            {type : 'max', name: '最大值'},
	                            {type : 'min', name: '最小值'}
	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name: '平均值'}
	                        ]
	                    }
	                },
	                {
	                    name:'流量',
	                    type:'bar',
	                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
	                    markPoint : {
	                        data : [
	                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
	                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name : '平均值'}
	                        ]
	                    }
	                }
	            ]
	        };
	        barChart.setOption(baroption);


            var prefix = ctx + "demo.json";

            $(function() {
                var options = {
                    id: "bootstrap-table",
                    url: ctx + 'gateway/admin/gateLogger/datatables',
                    toolbar: false ,
                    showFooter: false ,
                    showSearch: false,
                    showRefresh: false,
                    showToggle: false,
                    showColumns: false,
                    columns: [{
                        checkbox: true
                    },
                    {
                        field : 'userId',
                        title : '序号'
                    },
                    {
                        field : 'userCode',
                        title : '请求链接'
                    },
                    {
                        field : 'userName',
                        title : '访问次数'
                    },
                    {
                        field : 'userPhone',
                        title : '访问流量'
                    },
                    {
                        field : 'userEmail',
                        title : '成功次数'
                    },
                    {
                        field : 'userEmail',
                        title : '失败次数'
                    },
                    {
                        field: 'status',
                        title: '响应时间',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(datas, value);
                        }
                    }]
                };
                $.table.init(options);

            });
    </script>

</body>
</html>

